/**
 * jquery plugin for dropdown
 * 
 * this plugin creates an jquery based dropdown control
 * the dropdown could be initialized in follow way:
 * 
 * 		<body>
 * 			<div id 'your_id'></div>
 * 		<body>
 * 
 * 		<script>
 * 			$(document).ready(function() {
 * 				$('#your_id').dropdown({items:{01:'item1', 02:'item2', 03:'item3'}});
 * 			}
 * 		</script>
 * 
 * in the top case, the drop down will have 3 items. the number is the value like:
 * 		<ul>
 * 			<li value='01'>item1</li>
 * 		<ul>
 * 
 * following options are allowed to initialize:
 * 	-background_color1
 * 	-background-color2
 * 	-font_color
 * 	-items
 * 	-null_item
 * 	-width
 * 	-onchange funktion if item is clicked	
 * 
 * 
 * @author 			simon ungerboeck
 * @version			1.0
 * @param array		array of options
 */

(function($){
	var selectedItem ={};						//if user clicks an item, the value and the text will be saved in this object

	$.fn.extend({ 
		
	getValues : function(){					
		return selectedItem;
	},

	destroy: function(){
		this.html('');
	},

	dropdown: function(options) {
		var defaults = {
				background_color1: '#034da1',
				background_color2: '#014689',
				font_color : 'white',
				items : {},
				null_item : 'please select...',
				width: '150px',
				onchange: null
		};


		var options = $.extend(defaults, options);
		//setting css
		var li_css = GetLiCSS(options);
		var header_css = GetHeaderCSS(options);		

		//create html output
		var dropdown = $(this);
		dropdown.html(GetHtmlOutput(options));

		return this.each(function(){
			var header = $("#dropdownHeader", $(this));
			var list = $('#dropdownList', $(this));
			var li = $('li', $(this));

			//header events
			header.mouseover(function(){

				//$(this).attr('style', menue1_css);
			});

			header.mouseout(function(){

				//$(this).removeAttr('style');
			});

			header.click(function(){
				var arrow = $('#arrow1', header);
				arrow.attr('src', '../images/up.png');

				list.slideToggle(750);
				$(this).removeAttr('style').attr('style', header_css);

			});


			//li events
			li.click(function(){
				var text = $(this).html();
				header.html(text + '<img id="arrow1" src="../images/down1.png" height="10px" width="10px" align="right" style=" margin-right:10px; margin-top:5px"/>' );
				header.removeAttr('style');
				list.slideToggle(500);

				if (options.onchange != null)
					options.onchange($(this).attr('value'), $(this).html());

				selectedItem['value'] = $(this).attr('value');
				selectedItem['text'] = $(this).html();

			});

			li.mouseover(function(){
				$(this).attr('style', li_css);
			});

			li.mouseout(function(){
				$(this).removeAttr('style');
			});
		});
	}
	});


	/**
	 * returns the css attributs for li-elements
	 * @param 		array
	 * @return 		string css attributes for li-elements
	 */
	function GetLiCSS (options){
		var li_css ='';

		li_css += 'background-color: ' + options.background_color1 + ';';
		li_css += 'color: ' + options.font_color + ';';

		return li_css;
	};

	/**
	 * returns the css attributs for header element
	 * @param 		array
	 * @return 		string css attributes for dropdown header elements
	 */
	function GetHeaderCSS(options){
		var header_css ='';

		header_css += 'background: -moz-linear-gradient(top, ' + options.background_color1 + ', ' + options.background_color2 +');';
		header_css += 'background: -webkit-linear-gradient(top, ' + options.background_color1 + ', ' + options.background_color2 +');';
		header_css += 'color: ' + options.font_color + ';';

		return header_css;
	};

	/**
	 * returns the whole html output for the dropdown control
	 * @param 		array
	 * @return 		string html output
	 */	
	function GetHtmlOutput(options){
		var hrml = '';
		var li_elements =GetItems(options.items);

		var html = '<div class="top" style="width: ' + options.width + '">';
		html += 		'<div class="dropdownHeader" id="dropdownHeader">' + options.null_item + '<img id="arrow1" src="../images/down1.png" height="10px" width="10px" align="right" style=" margin-right:10px; margin-top:5px"/></div>'
		html += 		'<div class="dropdownList" id="dropdownList" style="display:none; background-color:#999">';
		html += 			'<ul style="list-style:none; padding-top:5px; padding-bottom:5px; margin:0px; margin-left:-35px;">';
		html +=				li_elements
		html += 			'</ul>';
		html += 		'</div>';
		html +=	   '</div>';

		return html;
	};

	/**
	 * returns all items for dropdown
	 * @param 		array
	 * @return		string items in form <li value='xy'>itemtext</li>
	 */
	function GetItems(items){
		var li_items ='';
		for(item in items)
			li_items += '<li value="' + item + '">' + items[item] + '</li>';

		return li_items;
	}
})(jQuery);